﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <div style="position: absolute; left:0; padding:10px;">
        <button id="btnEmpty" style="float:left; margin: 3px;">Geoid</button>
        <button id="btnGlobus" style="float:left; margin: 3px;">OpenGlobus</button>
        <button id="btnMapbox" style="float:left; margin: 3px;">Mapbox</button>
        <button id="btnBil" style="float:left; margin: 3px;">Bil16-Italy</button>
    </div>
    <script type="module">

        import { Globe } from '../../src/og/Globe.js';
        import { EmptyTerrain } from '../../src/og/terrain/EmptyTerrain.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { MapboxTerrain } from '../../src/og/terrain/MapboxTerrain.js';
        import { BilTerrain } from '../../src/og/terrain/BilTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';

        document.getElementById("btnEmpty").onclick = function () {
            globus.planet.setTerrain(emptyTerrain);
        };

        document.getElementById("btnGlobus").onclick = function () {
            globus.planet.setTerrain(globusTerrain);
        };

        document.getElementById("btnMapbox").onclick = function () {
            globus.planet.setTerrain(mapboxTerrain);
        };

        document.getElementById("btnBil").onclick = function () {
            globus.planet.setTerrain(bilTerrain);
        };

        let emptyTerrain = new EmptyTerrain(),
            globusTerrain = new GlobusTerrain(),
            mapboxTerrain = new MapboxTerrain(),
            bilTerrain = new BilTerrain({
                url: "//95.211.82.211:8080/geoserver/og/",
                layers: "og:n44_e009_1arc_v3",
                imageSize: 128,
                gridSizeByZoom: [128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 128, 64, 64, 32, 32, 32, 16, 8],
                extent: [[8.9, 44.0], [10.0, 45]]
            });

        let osm = new XYZ("OpenStreetMap", {
            specular: [0.0003, 0.00012, 0.00001],
            shininess: 20,
            diffuse: [0.89, 0.9, 0.83],
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": emptyTerrain,
            "layers": [osm]
        });
    </script>
</body>

</html>